<template>
  <div class="likeMic-container">
    <div class="main">
      <div class="dynamicInfo" v-for="(item) in likedMic" :key="item.mic_id">
        <div class="imgWrap">
          <van-image
            round
            width="1rem"
            height="1rem"
            fit="cover"
            :src="item.aut_pic"
          />
        </div>
        <div class="userContent">
          <div class="uNameWrap">
            <div class="uName">{{ item.aut_name }}</div>
            <svg-icon style="margin-right: 10px;" icon-class='duijie' width="23px" height="23px" class="icon"/>
          </div>
          <div class="contentText">{{ item.content }}</div>
          <van-image
            class="coverImg"
            width="2.5rem"
            height="2.5rem"
            fit="cover"
            v-for="(el,index) in String(item.cover).split('$$')" :key="index"
            :src="el"
            @click="previewImages(el,index)"
          />
          <div class="location">
            <svg-icon icon-class='xin-dingwei' width="15px" height="15px" class="icon"/>
            <div>{{ item.IpLocation }}</div>
          </div>
          <div class="contentFooter">
            <div class="pubDate">{{ item.pubDate | relativeTime }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { postUserLikedMicAPI } from '@/api'

export default {
  name: 'likeMic',
  data () {
    return {
      likedMic: []
    }
  },
  created () {
    this.getUserLikedMic()
  },
  methods: {
    async getUserLikedMic () {
      const { data: res } = await postUserLikedMicAPI({ userId: this.$route.params.userId })
      this.likedMic = res.message
      console.log(this.likedMic)
    }
  }
}
</script>

<style scoped lang="less">
.likeMic-container {
  .main {
    background-color: #fff;
    padding: 20px 30px 0px 20px;

    > div:last-child {
      border: none;
    }

    .dynamicInfo {
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 15px;
      margin-bottom: 15px;

      .imgWrap {
        margin-right: 13px;

        .van-image {
          border: 2px solid #ec87c0;
        }
      }

      .userContent {
        font-size: 14px;

        .uNameWrap {
          font-size: 16px;
          color: #919191;
          line-height: 37px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .contentText {
          padding-bottom: 8px;
        }

        .coverImg {
          margin-right: 3px;
          margin-bottom: 10px;
        }

        .location {
          color: #b3b3b3;
          display: flex;
          font-size: 12px;
          line-height: 25px;
          align-items: center;
          justify-content: start;
        }

        .contentFooter {
          width: 270px;
          color: #b3b3b3;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .iconRight {
            display: flex;
            align-items: center;
          }
        }
      }

    }
  }
}
</style>
